
<template>
  <div>
    <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="100px">
      <el-form-item prop="CID" label="选择小区">
        <el-select v-model="dataForm.CID" filterable placeholder="请选择" clearable>
          <el-option
            v-for="item in communitiesMix"
            :key="item.CID"
            :label="item.name"
            :value="item.CID"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="phone" label="预警电话">
        <el-input
          type="number"
          v-model="dataForm.phone"
          placeholder="请填写接收预警消息手机号"
          auto-complete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="warningEvent" label="预警类型">
        <el-select
          @change="changeWarnEvent"
          v-model="dataForm.warningEvent"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in warningEvents"
            :key="item.warningEvent"
            :label="item.name"
            :value="item.warningEvent"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="arrType.indexOf(dataForm.type) > -1" prop="warningType" label="标记类型">
        <el-cascader
          v-model="dataForm.warningType"
          :options="sys_person_sign"
          :props="{
            multiple: true,
            value: 'DID',
            label: 'name',
            children: 'dictionaries',
            checkStrictly: false,
            emitPath: false,
          }"
          collapse-tags
          :show-all-levels="false"
          clearable
        ></el-cascader>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer cen">
      <el-button @click.native="closedialog">取消</el-button>
      <el-button type="primary" @click.native="submitForm">确认</el-button>
    </div>
  </div>
</template>

<script>
import fileUtils from "@/utils/fileUtils.js";
export default {
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      var phone = /^^1[0-9]{10}$/;
      if (!phone.test(value)) {
        callback(new Error("请输入正确电话号"));
      } else {
        callback();
      }
    };
    return {
      dataForm: {
        warningType: [],
        CID: [],
        warningEvent: "",
        phone: "",
        type: "1",
      },
      arrType: [2, 5, 7],
      warningEvents: [
        {
          warningEvent: "d9d70855-a1ac-4ead-903d-ba9f42dbb5c9",
          type: 2,
          name: "出小区预警",
        },
        {
          warningEvent: "7d6e016a-ab38-46c9-8ca2-a6c05cbc871b",
          type: 5,
          name: "进出小区预警",
        },
        {
          warningEvent: "42910cb4-397e-4add-9fe0-f8a04111bc44",
          type: 3,
          name: "特定时间预警",
        },
        {
          warningEvent: "4d9e2092-e5c5-4622-b6df-af87a23e7505",
          type: 7,
          name: "长时间未通行预警",
        },
        {
          warningEvent: "1773de6b-0f40-4f5d-8403-263f225f11d2",
          type: 9,
          name: "境外人员长时间未通行预警",
        },
        {
          warningEvent: "834c410b-6bb5-4b13-866b-24517d59256d",
          type: 8,
          name: "特定国家人员通行预警",
        },
        {
          warningEvent: "ea3b70ca-86a4-4445-9d24-5e3e0975ef2e",
          type: 25,
          name: "境外人员注册预警",
        },
      ],
      dictList: {},
      rules: {
        CID: [{ required: true, message: "请选择小区", trigger: "blur" }],
        phone: [
          {
            required: true,
            validator: validatePass,
            message: "请填写正确手机号",
            trigger: "blur",
          },
        ],
        type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        warningType: [
          { required: true, message: "请选择标记类型", trigger: "blur" },
        ],
        warningEvent: [
          { required: true, message: "请选择标记类型", trigger: "blur" },
        ],
      },
      sys_person_sign: [],
    };
  },
  methods: {
    copy(obj) {
      var newobj = obj.constructor === Array ? [] : {};
      if (typeof obj !== "object") {
        return;
      }
      for (var i in obj) {
        newobj[i] = typeof obj[i] === "object" ? this.copy(obj[i]) : obj[i];
      }
      return newobj;
    },
    changeWarnEvent(e) {
      // slice,concat,...,map,Object.assign我感觉都是浅拷贝
      // 使用起来非常的方便简洁，相信在写ES6的时候也是备受欢迎的。但是需要注意的是：用扩展运算符对数组或者对象进行拷贝时，
      // 只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，
      // 也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。
      var arr = this.copy(this.dictList.sys_person_sign);
      let sign = [];
      sign = arr.map((it) => {
        // let s = { ...it };
        it.dictionaries = it.dictionaries.filter((item) => {
          return item.EWID.indexOf(e) > -1;
        });
        return it;
      });

      this.sys_person_sign = sign;
      let obj = this.warningEvents.find((item) => {
        return item.warningEvent === e;
      });
      this.dataForm.type = obj.type;
    },
    //级联选择
    // changeCascader(e) {
    //   console.log(e)
    //   let arr = [];
    //   arr = e.map((item) => {
    //     return item[1];
    //   });
    //   console.log(arr)
    //   this.dataForm.warningType = arr;
    // },
    // 关闭
    closedialog() {
      this.$emit("handleSave");
    },

    // 表单提交
    submitForm() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({ opration: 1 }, this.dataForm);
            this.$api.wxNotic.earlyWarning_configuration(params).then((res) => {
              this.editLoading = false;
              if (res.code == 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                });
                // this.$emit("handleEdit");
                this.$emit("handleSave");
                // this.handleClose();
              } else {
                this.$message({
                  message: "操作失败, " + res.msg,
                  type: "error",
                });
              }
            });
          });
        }
      });
    },
  },
  async mounted() {
    if (this.data.title) this.dataForm = this.data;
    this.dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.communitiesMix = await this.getCommunitiesMix();
  },
};
</script>
<style lang="scss" scoped>
.cen {
  text-align: center;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.mr20 {
  margin-right: 20px;
}
.el-select {
  display: block;
  position: relative;
}
</style>
